import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';

import axios from 'axios';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router';

import './Login.scss';
import { changeUserInfo } from './store/modules/user';
import ajax from './utiles/request';
import { loginFn } from './api/userLogin';
const App = () => {

  const dis = useDispatch()

  const router =useNavigate()

  const onFinish = (formData) =>{
    console.log(formData);


    // 必须要封装一下数据请求
    // axios.post('http://121.89.205.189:3000/admin/admin/login',formData)
    //   .then(res =>{
    //     console.log(res.data.data)
    //     // 1.将用户的数据保存起来
    //     dis(changeUserInfo(res.data.data))
    //     // 2.跳转到首页
    //     router('/')
    //     // 3.首页中，登录显示退出登录
    //     // 4.实现退出功能
    //   })

        // ajax({ url: '/admin/login', data: formData, method: 'post' }).then(res => {
        //     if (res.code == 200) {
        //         dis(changeUserInfo(res.data))
        //         router('/')
        //     } else {
        //         // 提示错误信息
        //     }
        // })


        loginFn(formData).then(res=>{
          if(res.code == 200){
            dis(changeUserInfo(res.data))
             router('/')
          }else{
            // 提示错误信息
          }
         
        })


  }
  
  return (
   <div className="bg">
      <div className="login_main">
          <Form
            className='login-form'
            name="login"
            initialValues={{ remember: true }}
            style={{ maxWidth: 400 }}
            onFinish={onFinish}
          >

            <Form.Item
              name="adminname"
              rules={[{ required: true, message: '请输入账号!' ,type:'string',min:1}]}
            >
              <Input allowClear prefix={<UserOutlined />} placeholder="管理员账号" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password prefix={<LockOutlined />} type="password" placeholder="管理员密码" />
            </Form.Item>

            <Form.Item>
              <Flex justify="space-between" align="center">
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>记住密码</Checkbox>
                </Form.Item>
                <a href="">忘记密码</a>
              </Flex>
            </Form.Item>

            <Form.Item>
              <Button block type="primary" htmlType="submit">
                登录
              </Button>
              {/* <a href="">立即注册</a> */}
            </Form.Item>
          </Form>
      </div>
   </div>
  );
};
export default App;